<template>
	<pager ref="pager" @loadData="loadData">
		<view v-if="inited" class="w100 h100vh flex align-c justify-b flex-col safe-bottom">
			<view class="topbanner w100 flex flex-row align-c justify-c">
				<view class="box1 flex flex-col align-c justify-c">
					<image class="icon1" mode="widthFix" :src="$assets.img('/static/images/ic003.png')"></image>
				</view>
			</view>
			<view class="login-content w100 flex flex-col align-c justify-c">
				<u-button
					type="primary"
					shape="circle"
					size="default"
					:ripple="true"
					:throttle-time="1000"
					open-type="getPhoneNumber"
					@getphonenumber="wechatGetPhoneNumber"
					:customStyle="{
						fontSize: '32rpx !important',
						fontWeight: 'initial',
						width: '560rpx',
						height: '100rpx',
						background: 'linear-gradient(180deg, #427DF7 0%, #0B51E4 100%)',
						borderRadius: '50rpx',
					}"
				>
					微信授权登录
				</u-button>
				<view class="phone-btn" @click="phoneLogin">手机号验证注册/登录</view>
			</view>
			<view @click="showService" class="w100 footer flex flex-col align-c justify-c">
				<view class="flex flex-row align-c">
					<text class="txt1">登录即代表您已经同意了互邦轮椅</text>
					<text class="txt2">《服务协议》</text>
				</view>
				<!-- <view class="txt3">未注册过的用户将直接为您创建围老账户</view> -->
			</view>
		</view>
	</pager>
</template>

<script>
export default {
	data() {
		return {
			loginCode: null,
			inited: false
		};
	},
	onLoad() {
		const vm = this;
		vm.refreshLoginCode();
	},
	methods: {
		refreshLoginCode() {
			const vm = this;

			vm.$utils
				.getWechatLoginOAuthCode()
				.then(loginRes => {
					vm.loginCode = loginRes.code;
				})
				.catch(error => {
					console.log(error);
					uni.showModal({
						showCancel: false,
						title: '获取登录授权失败',
						content: JSON.stringify(error),
						success() {
							uni.navigateBack({
								delta: 1
							});
						}
					});
				});
		},
		loadData() {
			const vm = this;
			vm.inited = true;
			vm.$refs.pager.finish();
		},
		showService() {
			const vm = this;
			vm.$utils.openWebview('https://agedmall.ejiakanghu.cn/service_word/', '服务协议');
		},
		wechatGetPhoneNumber(e) {
			const vm = this;
			console.log(e);
			let encryptedData = e.detail.encryptedData;
			if (!vm.$utils.isEmpty(encryptedData)) {
				vm.$api
					.weixinLogin(encryptedData, e.detail.iv, vm.loginCode)
					.then(res => {
						console.log(res);
						res.data.userInfo.token = res.data.token;
						vm.$store.commit('app/saveUserInfo', res.data.userInfo);
						vm.$utils.showToast('登录成功');
						uni.$emit('LOGIN_SUCCESS');
						setTimeout(() => {
							uni.navigateBack({
								delta: 1
							});
						}, 500);
					})
					.catch(error => {
						vm.refreshLoginCode();
						console.log(error);
						vm.$utils.showToast(error);
					});
			} else {
				if (e && e.detail && e.detail.errMsg && e.detail.errMsg.indexOf('user deny') != -1) {
					uni.showModal({
						title: '授权失败',
						content: '您已拒绝获取绑定手机号登录授权，可使用其它手机号验证登录',
						cancelText: '知道了',
						confirmText: '验证登录',
						cancelColor: '#000000',
						confirmColor: '#108001',
						showCancel: true,
						success(res) {
							if (res.confirm) {
								vm.phoneLogin();
							}
						}
					});
				}
			}
		},
		phoneLogin() {
			const vm = this;
			vm.$utils.openPage('/pkgLogin/pages/phone/index');
		}
	}
};
</script>
<style scoped lang="scss">
.topbanner {
	.box1 {
		.icon1 {
			margin-top: 200rpx;
			display: block;
			width: 480rpx;
			height: 137rpx;
		}
	}
}

.footer {
	padding-bottom: 60rpx;
	font-size: 24rpx;

	.txt1 {
		color: #999999;
	}

	.txt2 {
		color: #2196f3;
	}

	.txt3 {
		margin-top: 10rpx;
		color: #999999;
	}
}

/deep/ .u-btn {
	width: 465rpx !important;
	height: 88rpx !important;
	font-size: 32rpx !important;
	font-weight: bold;
}

.login-content {
	padding: 0 120rpx;
	
	.phone-btn {
		font-size: 26rpx;
		color: #EFEFEF;
		padding: 30rpx 0;
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #EFEFEF;
	}
}
</style>
